<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.s-scrollbar-y {
	background-color: #ccc;
	border-radius: 5px;
	width: 10px;
	height: 99%;
	position: absolute;
	right: 3px;
	top: 0px;
	opacity:.7;
}

.s-scrollbar-handle-y {
	background-color: #888;
	position: absolute;
	height: 30%;
	width: 10px;
	border-radius: 5px;
	cursor: pointer;
}
.s-scrollbar-x {
	background-color: #ccc;
	border-radius: 5px;
	width: 90%;
	height: 10px;
	position: absolute;
	bottom: 3px;
	left: 0px;
	opacity:.7;
}

.s-scrollbar-handle-x {
	background-color: #888;
	position: absolute;
	height: 10px;
	width: 30%;
	border-radius: 5px;
	cursor: pointer;
}
#asdf {
	width: 300px;
	height: 300px;
	border: solid 1px #000;
	overflow: hidden;
	position: relative;
}

#c {
	width: 1000px;
	height: 1000px;
}
</style>
</head>
<body>
	<div id="asdf">
		<div id="c">
			<img alt="" src="azusa.jpg">
		</div>
		<div class="s-scrollbar-y" id="ee">
			<div class="s-scrollbar-handle-y" id="c1"></div>
		</div>
		<div class="s-scrollbar-x" id="ee1">
			<div class="s-scrollbar-handle-x" id="c2"></div>
		</div>
	</div>
</body>
<script src="../jquery.min.js"></script>
<script src="S.js"></script>
<script>
	var draggable = new S.Dragable({
		axis : 'y',
		region : {
			top : 0,
			bottom : '100%'
		},
		moving : function(data) {

			var $handle = $(data.handle);
			var top = parseInt($handle.css('top'),10);
			var height = $handle.height();
			var containHeight =  parseInt( $('#asdf').height());
			var scrollHeigth = parseInt($('#asdf').prop('scrollHeight'));

			if (top <= 0) { return; }
			if (top+height>=$('#ee').height()) { return; }
			
			var t = top * (scrollHeigth - containHeight*2) / ($('#ee').height()-height);

			t = parseInt(t, 10);

			$('#asdf').scrollTop(t);

			$('#ee').css({
				top : t
			});
		}
	});
	draggable.bind(document.getElementById('c1'));
	
	
	var draggable = new S.Dragable({
		axis : 'x',
		region : {
			left : 0,
			right : '100%'
		},
		moving : function(data) {

			var $handle = $(data.handle);
			var left = parseInt($handle.css('left'),10);
			var width = $handle.width();
			var containWidth =  parseInt( $('#asdf').width());
			var scrollWidth = parseInt($('#asdf').prop('scrollWidth'));

			if (left <= 0) { return; }
			if (left+width>=$('#ee1').width()) { return; }
			var t = left * (scrollWidth - containWidth*2) / ($('#ee1').width()-width);
			t = parseInt(t, 10);
			$('#asdf').scrollLeft(t);
			
			$('#ee1').css({
				left : t
			}); 
		}
	});
	draggable.bind(document.getElementById('c2'));
</script>
</html>